import React, { Component } from 'react'

import { connect } from "react-redux"
import action from '../../store/action'

import { withRouter } from "react-router-dom"

import Inclusive from "../heads/inclusive.js"
import "./search.less"

class Search extends Component {
    render() {
        let { commodityList, storeList, historydata, clearArr, hotInputdata, clearHistoryData } = this.props
        // console.log(commodityList);
        return (
            <div id="search">
                <div id="heads">
                    <Inclusive />
                </div>
                <div className="hotInputdata">
                    <h2>热门推荐</h2>
                    {/* 已经搜索过的信息 */}
                    <div className="item" >
                        {
                            hotInputdata.length > 0 ?
                                hotInputdata.map(item => {
                                    return <div className="itemEvery" key={item.id} onClick={() => {
                                        this.props.getReturnData({
                                            val: item.val
                                        })
                                        this.props.getInputAchieve(item.val)
                                    }}>{item.val}</div>
                                }) : null
                        }
                    </div>
                </div>
                <div id="hisSearch">
                    {
                        historydata.length > 0 ?
                            <h2>历史搜索</h2>
                            : null
                    }

                    {
                        historydata.length > 0 ?
                            <span className="iconfont icon-shanchu1 historydata_span" onClick={() => {
                                clearHistoryData()
                            }}></span>
                            : null
                    }

                    {/* 已经搜索过的信息 */}
                    <div className="item">
                        {
                            historydata.length > 0 ?
                                historydata.map(item => {
                                    return <div className="itemEvery" key={item.id} onClick={() => {
                                        this.props.getReturnData({
                                            val: item.val
                                        })
                                        this.props.getInputAchieve(item.val)
                                    }}>{item.val}</div>
                                }) : null
                        }
                    </div>

                </div>
                {
                    commodityList.length > 0 ?
                        <div id="findSearch" ref="findSearch">
                            {/* 写成搜索到的商品数据 */}
                            {/* <h3>商品</h3> */}
                            <div className="storeList">

                                {
                                    commodityList.map((item, index) => {
                                        return <div className="everyList" onClick={() => {
                                            // 存入所需数据
                                            sessionStorage.setItem('shop_id', JSON.stringify(item.commodity_id))
                                            sessionStorage.setItem('shop_img', JSON.stringify(item.commodity_images[0]))
                                            // console.log(item.commodity_id, item.commodity_images[0]);
                                            // 需要跳路由
                                            sessionStorage.setItem("flag", JSON.stringify(true))
                                            sessionStorage.setItem('shop_router', JSON.stringify(this.props.history.location.pathname))
                                            this.props.history.push("/itemdetail")
                                            clearArr()

                                        }} key={item.commodity_id}>
                                            <p>{item.commodity_namer}</p>
                                        </div>
                                    })
                                }

                                {
                                    storeList.map(item => {
                                        return <div className="everyList" onClick={() => {
                                            // 存储商店id
                                            sessionStorage.setItem("flag", JSON.stringify(false))
                                            sessionStorage.setItem('store_id', JSON.stringify(item.store_list_id))
                                            sessionStorage.setItem("router", JSON.stringify(this.props.history.location.pathname))
                                            this.props.history.push("/list")
                                            clearArr()

                                        }} key={item.store_id}>
                                            <p>{item.store_name}</p>
                                            <p>{item.store_mess}</p>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                        : null
                }
            </div>
        )
    }

    switchHeadCom = (props) => {
        let { clearSearch } = this.props
        clearSearch()
        if (props === 'close') {
            this.props.history.push("/home")
        }
    }

    componentDidMount() {
        if (this.refs.findSearch) {

            console.log(123);
        }
    }
}

export default connect(state => state.foodf, action.foodf)(withRouter(Search))
